<template>
    <div>
        <a-form layout="inline">
            <a-form-item label="发票状态:" :label-col="{ md: 8,xs:24 }" :wrapper-col="{ md: 16,xs:24 }">
                <!-- <a-input v-model="formList.logi_no" /> -->
                <a-select style="width: 150px;" v-model="formList.status" placeholder="请选择发票状态">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option :value="0">已申请</a-select-option>
                    <a-select-option :value="1">已寄件</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="公司名称:" :label-col="{ md: 8,xs:24 }" :wrapper-col="{ md: 16,xs:24 }">
                <a-input style="width: 180px;" placeholder="请输入公司名称" v-model="formList.company" />
            </a-form-item>
            <a-form-item>
                <a-button class="" type="primary" @click="onSearch">搜索</a-button>
            </a-form-item>
        </a-form>
        <div class="main">
            <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id" :scroll="{x: 1700, y: 500 }">
                <!-- :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
                <template slot="action" slot-scope="text, record">
                    <a-button size="small" class="mb5" type="primary" @click="details(record)">开票详情</a-button>
                    <a-button v-if="routerShow($route,'order_send_invoice')" size="small" type="primary" @click="editBtn(record)">发票寄件</a-button>
                </template>
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
        <!-- 详情 -->
        <a-modal :destroyOnClose="true" title="详情" v-model="detaiVisible">
            <template slot="footer">
                <a-button key="submit" type="primary" @click="detaiVisible = false">确定</a-button>
            </template>
            <a-form>
                <a-form-item label="收件人:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.name}}</a-form-item>
                <a-form-item label="所属地区:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.area}}</a-form-item>
                <a-form-item label="详细地址:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.address}}</a-form-item>
                <a-form-item label="邮政编号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.zip}}</a-form-item>
                <a-form-item label="联系电话:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.mobile}}</a-form-item>
                <a-form-item label="发票类型:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.invoices_type_name}}</a-form-item>
                <a-form-item label="发票抬头:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.invoices_name}}</a-form-item>
                <a-form-item label="纳税人识别号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.identification}}</a-form-item>
                <a-form-item label="注册电话:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.telephone}}</a-form-item>
                <a-form-item label="银行账户:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.bank_name}}</a-form-item>
                <a-form-item label="适用区域:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.bank_account}}</a-form-item>
                <a-form-item label="收件人:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.name}}</a-form-item>
                <a-form-item label="地区:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.area}}</a-form-item>
                <a-form-item label="联系电话:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.telephone}}</a-form-item>
                <a-form-item label="邮政编码:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">{{itemDetail.zip}}</a-form-item>
            </a-form>
        </a-modal>
        <!-- 寄件 -->
        <a-modal @ok="editOk" :maskClosable="false" :confirmLoading="confirmLoading" :destroyOnClose="true" title="寄件" v-model="editVisible">
            <a-form>
                <a-form-item label="物流公司:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="editForm.logi_name" />
                </a-form-item>
                <a-form-item label="物流单号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="editForm.logi_no" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';
import Vue from 'vue';
import {
  USER,
} from '@/store/mutation-types';

export default {
  name: 'Invoice',
  data() {
    return {
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: {
        status: '',
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */

      /* 详情 */
      detaiVisible: false, // 窗口开关
      itemDetail: {}, // 详情

      // 寄件
      editVisible: false,
      confirmLoading: false,
      editForm: {
        oid: '',
        invoice_id: '',
        user_id: '',
        logi_name: '',
        logi_no: '',
      },

      // 权限判断
      userData: {},
      isAdmin: false, // 是否后台管理猿
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.paymentInvoice.Fields,
      dataLists: state => state.paymentInvoice.dataLists,
      requestCode: state => state.paymentInvoice.requestCode,
      setMealAllData: state => state.paymentAccount.setMealAllData, // 套餐信息

    }),
  },
  mounted() {
    this.userData = Vue.ls.get(USER);
    if (this.userData.grade === 1 || this.userData.is_root === 1) {
      this.isAdmin = true;
    } else {
      this.isAdmin = false;
    }
    // this.setMealAll();
    this.changeData();
    console.log(this);
  },
  methods: {
    ...mapActions({
      getLists: 'paymentInvoice/getLists', // 列表
      dataEdit: 'paymentInvoice/dataEdit', // 寄快递
      setMealAll: 'paymentAccount/setMealAll', // 套餐信息
    }),
    /* 通用模块 */
    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onSearch() {
      // alert("该功能程序猿小哥正在开发中~~~")
      this.formList.page = 1;
      this.changeData();
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 800);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */
    /* 寄件 */
    editBtn(item) {
      console.log(item);
      (this.editForm = {
        oid: item.oid,
        invoice_id: item.id,
        user_id: item.user_id,
        logi_name: '',
        logi_no: '',
      }),
      (this.editVisible = true);
      // this.$router.push(`/news/edit/${item.id}`);
    },
    editOk() {
      this.confirmLoading = true;
      this.dataEdit(this.editForm);
      setTimeout(() => {
        if (this.requestCode === 0) {
          this.visible = false;
          this.changeData();
        }
        this.confirmLoading = false;
      }, 1000);
    },
    /* 寄件 */
    // 删除
    delBtn(item) {
      const _this = this;
      const ids = {
        id: [],
      };
      ids.id.push(item.id);
      this.$confirm({
        title: '您确定要删除该数据吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(ids);
          _this.changeData();
        },
      });
    },
    // 批量删除
    batchDelBtn() {
      if (this.selectedRowKeys.length <= 0) {
        this.$warning({
          title: '提示',
          content: '请先勾选需要删除的数据',
        });
        return false;
      }
      const _this = this;
      const ids = {
        id: this.selectedRowKeys,
      };
      this.$confirm({
        title: '您确定要删除勾选的数据吗?',
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(ids);
          _this.changeData();
        },
      });
    },
    /* 详情 */
    details(item) {
      console.log(item);
      this.itemDetail = item;
      this.detaiVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.modalUl {
    font-size: 16px;

    li {
        margin-bottom: 10px;

        span {
            font-weight: bold;
            margin-right: 10px;
        }

        div {
            display: line;
            border: 1px solid #ccc;
        }
    }
}
</style>
